<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: var(--vscode-font-family);
      margin: 0;
      padding: 0;
      background: var(--vscode-sideBar-background, var(--vscode-editor-background));
      color: var(--vscode-foreground);
      font-size: 11px;
    }

    .list {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 6px 2px 6px 2px;
    }

    .group-title {
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 12px;
      margin: 0 0 2px 0;
      color: var(--vscode-descriptionForeground, #6a7ba2);
      letter-spacing: 0.2px;
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: color 0.18s;
      padding: 2px 0 2px 0;
    }

    .group-title:hover {
      color: var(--vscode-list-hoverForeground, #3578d4);
      background: var(--vscode-list-hoverBackground, #232b3a11);
    }

    .group-arrow {
      width: 11px;
      height: 11px;
      margin-right: 4px;
      transition: transform 0.18s;
      flex-shrink: 0;
      display: inline-block;
    }

    .group-title.collapsed .group-arrow {
      transform: rotate(-90deg);
    }

    .group-title::before {
      content: '';
      display: inline-block;
      width: 2px;
      height: 14px;
      background: var(--vscode-list-activeSelectionForeground, #3578d4);
      border-radius: 1px;
      margin-right: 6px;
      opacity: 0.5;
    }

    .group-content {
      margin-left: 13px;
      display: flex;
      flex-direction: column;
      gap: 0;
      border-left: 1px solid var(--vscode-sideBarSectionHeader-border, #232b3a22);
      padding-left: 4px;
    }

    .group-content.collapsed {
      display: none;
    }

    .group-separator {
      height: 1px;
      background: var(--vscode-sideBarSectionHeader-border, #232b3a22);
      margin: 8px 0 6px 0;
      border: none;
    }

    .item {
      display: flex;
      align-items: center;
      background: var(--vscode-sideBarSectionHeader-background, #232b3a08);
      border-radius: 3px;
      box-shadow: none;
      padding: 3px 6px 3px 4px;
      min-width: 0;
      transition: background 0.15s;
      position: relative;
      cursor: pointer;
      margin-bottom: 2px;
    }

    .item:hover {
      background: var(--vscode-list-hoverBackground, #3578d422);
    }

    .status-icon {
      width: 10px;
      height: 10px;
      margin-right: 6px;
      flex-shrink: 0;
      vertical-align: middle;
      filter: none;
    }

    .title {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.05px;
      color: var(--vscode-foreground, #eaf1ff);
    }

    .action-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0 4px;
      border-radius: 2px;
      margin-left: 4px;
      transition: background 0.15s;
      outline: none;
      display: flex;
      align-items: center;
      height: 18px;
      min-width: 18px;
      box-shadow: none;
    }

    .action-btn:active {
      background: none;
    }

    .action-btn[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .action-icon {
      width: 15px;
      height: 15px;
    }

    .header {
      display: none;
    }

    #config-panel {
      background: var(--vscode-sideBar-background);
      border: 1px solid var(--vscode-sideBarSectionHeader-border, #232b3a22);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .config-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .config-label {
      font-weight: 500;
      font-size: 12px;
      color: var(--vscode-descriptionForeground, #6a7ba2);
    }

    .config-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    input[type="password"],
    select {
      flex: 1;
      max-width: 160px;
      height: 22px;
      padding: 0 8px;
      font-size: 12px;
      border: 1px solid var(--vscode-input-border, #232b3a44);
      border-radius: 4px;
      background: var(--vscode-input-background, #232b3a11);
      color: var(--vscode-input-foreground, #eaf1ff);
      outline: none;
    }

    input[type="password"]:focus,
    select:focus {
      border-color: var(--vscode-focusBorder, #3578d4);
      box-shadow: 0 0 0 2px #3578d422;
    }

    button {
      height: 22px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 500;
      color: var(--vscode-button-foreground, #ffffff);
      background: var(--vscode-button-background, #3578d4);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s ease;
      flex-shrink: 0;
    }

    button:hover {
      background: var(--vscode-button-hoverBackground, #285ea8);
    }
  </style>
</head>

<body>

  <div id="config-panel">
    <!-- 移除API Key输入框和保存按钮 -->
    <div class="config-group">
      <div class="config-label">选择项目</div>
      <div class="config-input-row">
        <select id="project-select">
          <option value="">请选择项目</option>
        </select>
        <button id="refresh-projects-btn">刷新</button>
      </div>
    </div>
  </div>


  <div class="list">
    {{items}}
  </div>
  <script>
    // webviewScript
    const vscode = acquireVsCodeApi();
    function showConfirm(message, onConfirm) {
      if (document.getElementById('my-confirm-mask')) return;
      var mask = document.createElement('div');
      mask.id = 'my-confirm-mask';
      mask.style = 'position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.13); z-index: 9999; display: flex; align-items: center; justify-content: center;';
      var dialog = document.createElement('div');
      dialog.style = 'background: var(--vscode-editorWidget-background, #232b3a); color: var(--vscode-editorWidget-foreground, #eaf1ff); border: 1px solid var(--vscode-widget-border, #232b3a44); border-radius: 6px; min-width: 220px; max-width: 80vw; box-shadow: 0 2px 8px #0002; padding: 18px 18px 12px 18px; font-size: 13px; text-align: center; position: relative;';
      dialog.innerHTML = '<div style="margin-bottom: 16px;">' + message + '</div>' +
        '<button id="my-confirm-ok" style="margin-right: 16px; min-width: 56px; height: 28px; border-radius: 3px; border: none; background: var(--vscode-button-background, #3578d4); color: var(--vscode-button-foreground, #fff); font-size: 13px; cursor: pointer;">确定</button>' +
        '<button id="my-confirm-cancel" style="min-width: 56px; height: 28px; border-radius: 3px; border: none; background: var(--vscode-button-secondaryBackground, #232b3a22); color: var(--vscode-button-secondaryForeground, #eaf1ff); font-size: 13px; cursor: pointer;">取消</button>';
      mask.appendChild(dialog);
      document.body.appendChild(mask);
      function close() { mask.remove(); }
      document.getElementById('my-confirm-ok').onclick = function () {
        close();
        onConfirm && onConfirm();
      };
      document.getElementById('my-confirm-cancel').onclick = close;
      mask.onclick = function (e) { if (e.target === mask) close(); };
      window.addEventListener('keydown', function esc(e) { if (e.key === 'Escape') { close(); window.removeEventListener('keydown', esc); } });
    }
    function showToast(message) {
      let toast = document.getElementById('my-toast');
      if (!toast) {
        toast = document.createElement('div');
        toast.id = 'my-toast';
        toast.style = 'position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:99999;background:rgba(40,40,40,0.97);color:#fff;padding:10px 28px;border-radius:6px;font-size:14px;box-shadow:0 2px 8px #0003;transition:opacity 0.2s;opacity:0;pointer-events:none;';
        document.body.appendChild(toast);
      }
      toast.textContent = message;
      toast.style.opacity = '1';
      setTimeout(() => {
        toast.style.opacity = '0';
      }, 2200);
    }
    window.addEventListener('DOMContentLoaded', function () {
      function bindListEvent() {
        var listEl = document.querySelector('.list');
        if (listEl) {
          listEl.addEventListener('click', function (e) {
            var btnDone = e.target.closest('.action-btn[title="标记为已完成"]');
            var btnClose = e.target.closest('.action-btn[title="关闭任务"]');
            if (btnDone) {
              var id = btnDone.getAttribute('data-task-id');
              showConfirm('确定要标记为已完成吗？', function () {
                vscode.postMessage({ command: 'markDone', id: id });
              });
              return;
            }
            if (btnClose) {
              var id = btnClose.getAttribute('data-task-id');
              showConfirm('确定要关闭任务吗？', function () {
                vscode.postMessage({ command: 'closeTask', id: id });
              });
              return;
            }
          });
        } else {
          setTimeout(bindListEvent, 100);
        }
      }
      bindListEvent();
      // 配置面板初始化
      vscode.postMessage({ command: 'getSavedConfig' });
      document.getElementById('refresh-projects-btn').onclick = function () {
        const sel = document.getElementById('project-select');
        const name = sel.value;
        vscode.postMessage({ command: 'saveProjectNameAndRefresh', projectName: name });
      };
      document.getElementById('project-select').onchange = function (e) {
        const name = e.target.value;
        vscode.postMessage({ command: 'saveProjectName', projectName: name });
      };
    });
    let isRefreshing = false;
    function setActionButtonsDisabled(disabled) {
      document.querySelectorAll('.action-btn').forEach(btn => {
        btn.disabled = disabled;
      });
    }
    window.addEventListener('message', event => {
      const msg = event.data;
      if (msg.command === 'setProjectName') {
        document.getElementById('project-select').value = msg.projectName || '';
      }
      if (msg.command === 'setProjects') {
        const sel = document.getElementById('project-select');
        sel.innerHTML = '<option value="">请选择项目</option>' + (msg.projects || []).map(p => `<option value="${p.Name}">${p.DisplayName}</option>`).join('');
        if (msg.projectName) sel.value = msg.projectName;
      }
      if (msg.command === 'showInfo') {
        showToast(msg.text);
      }
      if (msg.command === 'setTasks') {
        const listEl = document.querySelector('.list');
        if (listEl) listEl.innerHTML = '<div style="color:#888;text-align:center;margin:24px 0;">暂无任务</div>';
      }
      // 每次任务列表刷新后，恢复按钮可用
      setTimeout(() => setActionButtonsDisabled(false), 100);
    });
    function refreshTasks() {
      isRefreshing = true;
      setActionButtonsDisabled(true);
      vscode.postMessage({ command: 'refreshTasks' });
    }
    const groupState = {};
    function toggleGroup(type) {
      var content = document.getElementById('group-content-' + type);
      var title = document.getElementById('group-title-' + type);
      if (!content || !title) return;
      var collapsed = content.classList.toggle('collapsed');
      if (collapsed) {
        title.classList.add('collapsed');
        groupState[type] = false;
      } else {
        title.classList.remove('collapsed');
        groupState[type] = true;
      }
    }
    window.addEventListener('DOMContentLoaded', function () {
      groupState['REQUIREMENT'] = true;
      groupState['DEFECT'] = true;
      groupState['SUB_TASK'] = true;
    });
    function closeTask(id) {
      vscode.postMessage({ command: 'closeTask', id });
    }
  </script>
</body>

</html>